<template>
	<view class="box">
		<!-- header -->
		<view style="height: 10px;"></view>
		<view class="header">
			<uni-card class="header-card" style="height: 80px;" :is-shadow="false">
				<uni-row class="demo-uni-row" style="text-align: center; margin-top: 10px;">
					<uni-col :span="4" style="margin-left: 15px;">
						<uni-icons type="calendar-filled" size="45" color="#DD524D"></uni-icons>
					</uni-col>
					<uni-col :span="4" style="margin-left: 15px;">
						<uni-icons @click="toLearingTime()" type="notification-filled" size="45" color="#2979FF"></uni-icons>
					</uni-col>
					<uni-col :span="4" style="margin-left: 15px;">
						<uni-icons type="wallet-filled" size="45" color="#4cd964"></uni-icons>
					</uni-col>
					<uni-col :span="4" style="margin-left: 15px;">
						<uni-icons  @click="open" type="calendar-filled" size="45" color="#DD524D"></uni-icons>
					</uni-col>
					<uni-col :span="4" style="margin-left: 15px;">
						<uni-icons type="wallet-filled" size="45" color="#2979FF"></uni-icons>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row" style="text-align: center;">
					<uni-col :span="4" style="margin-left: 15px;">
						<text>学习打卡</text>
					</uni-col>
					<uni-col :span="4" style="margin-left: 15px;">
						<text @click="toLearingTime()">学习计时</text>
					</uni-col>
					<!-- 备忘录有通知功能 -->
					<uni-col :span="4" style="margin-left: 15px;">
						<text>备忘录</text>
						<!-- <uni-popup ref="popup" type="dialog">
							<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true"
								@close="close" @confirm="confirm" title="新建任务"><template>
									<view>
										<uni-easyinput v-model="addtask.task" placeholder="新建任务"></uni-easyinput>
										<text>请选择重复日期</text>
										<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change">
										</uni-data-checkbox>
									</view>
								</template></uni-popup-dialog>
						</uni-popup> -->
					</uni-col>
					<uni-col :span="4" style="margin-left: 15px;">
						<text  @click="open">任务</text>
						<uni-popup ref="popup" type="dialog">
							<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true"
								@close="close" @confirm="confirm" title="新建任务"><template>
									<view>
										<uni-easyinput v-model="addtask.task" placeholder="新建任务"></uni-easyinput>
										<text>请选择重复日期</text>
										<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change">
										</uni-data-checkbox>
									</view>
								</template></uni-popup-dialog>
						</uni-popup>
					</uni-col>
					<uni-col :span="4" style="margin-left: 15px;">
						<text>英语单词</text>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
		<view class="body">
			<!-- 分段器 -->
			<!-- <uni-card :is-shadow="false"> -->
			<template>
				<view>
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
						activeColor="#2979FF"></uni-segmented-control>
					<view class="content">
						<view v-show="current === 0">
							<!-- 今日任务记录 -->
							<uni-card title="今日任务记录" :is-shadow="false">
								<!-- <uni-list v-for=" (item,index) in taskForm" :key="item.id">
										<uni-list-item :title="item.task"></uni-list-item>
									</uni-list> -->
								<uni-list v-for=" (item,index) in taskForm" :key="item.id">
									<uni-list-item>
										<!-- 自定义 header -->
										<view slot="header" class="slot-box">
											<text>{{item.task}}</text>
										</view>
										<template slot="footer">
											<text style="color: #007AFF;" @click="complete(item.id)">完成</text>
											<uni-icons :type="item.icon" size="30" color="#007AFF"
												@click="complete(item.id)"></uni-icons>
											<text> |</text>
											<text style="color: #E43D33;">删除</text>
											<uni-icons type="trash-filled" size="30" color="#E43D33"></uni-icons>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-card>
							<!-- 未完成任务记录 -->
							<uni-card title="!未完成任务记录" :is-shadow="false">
								<uni-list v-for=" (item,index) in unTaskForm" :key="item.id">
									<uni-list-item>
										<!-- 自定义 header -->
										<view slot="header" class="slot-box">
											<text style="color: #E43D33;">!{{item.task}}</text>
										</view>
										<template slot="footer">
											<text style="color: #E43D33;">删除</text>
											<uni-icons type="trash-filled" size="30" color="#E43D33"></uni-icons>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-card>
							<!-- 昨日完成的任务记录 -->
							<uni-card title="昨日完成任务记录" :is-shadow="false">
								<uni-list v-for=" (item,index) in completeTaskFrom" :key="item.id">
									<uni-list-item>
										<!-- 自定义 header -->
										<view slot="header" class="slot-box">
											<text style="color: #18BC37;">{{item.task}}</text>
										</view>
										<template slot="footer">
											<uni-icons type="checkmarkempty" size="30" color="#18BC37"></uni-icons>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-card>
						</view>
						<view v-show="current === 1">
							<uni-card title="打卡记录" :is-shadow="false">
								<uni-list v-for=" (item,index) in completeTaskFrom" :key="item.id">
									<uni-list-item>
										<!-- 自定义 header -->
										<view slot="header" class="slot-box">
											<text style="color: #18BC37;">{{item.task}}</text>
										</view>
										<template slot="footer">
											<uni-icons type="checkmarkempty" size="30" color="#18BC37"></uni-icons>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-card>
						</view>
						<!-- 备忘录 -->
						<view v-show="current === 2">
							<uni-card title="已过期" :is-shadow="false">
								<uni-list v-for=" (item,index) in completeTaskFrom" :key="item.id">
									<uni-list-item>
										<!-- 自定义 header -->
										<view slot="header" class="slot-box">
											<uni-icons type="info" size="30" color="#E43D33"></uni-icons>
											<text style="margin-left: 5px;">{{item.task}}</text>
										</view>
										<!-- <text slot="body" class="slot-box slot-text">{{item.task}}</text> -->
										<template slot="footer">
											<text style="color: #E43D33;">{{item.time}}</text>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-card>
							<uni-card title="进行中" style="height: 400px;">

							</uni-card>
						</view>
						<view v-show="current === 3">
							<uni-card title="今日单词" :is-shadow="false">
								<uni-list v-for=" (item,index) in todayWord" :key="index">
									<uni-list-item>
										<!-- 自定义 header -->
										<view slot="header" class="slot-box">
											<text>{{item.english}}</text>
										</view>
										<template slot="footer">
											<text style="color: #007AFF;">{{item.chinese}}</text>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-card>
						</view>
					</view>
				</view>
			</template>
			<!-- </uni-card> -->

		</view>
		<!-- footer -->
		<view style="height: 10px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: [],
				range: [{
					"value": 0,
					"text": "周一"
				}, {
					"value": 1,
					"text": "周二"
				}, {
					"value": 2,
					"text": "周三"
				},{
					"value": 3,
					"text": "周四"
				},{
					"value": 4,
					"text": "周五"
				},{
					"value": 5,
					"text": "周六"
				},{
					"value": 6,
					"text": "周日"
				}],
				//任务表单
				taskForm: [{
					id: 1,
					task: "学习java",
					completion: "确认完成",
					icon: 'circle'
				}, {
					id: 2,
					task: "学习数据库",
					completion: "确认完成",
					icon: 'circle'
				}, {
					id: 3,
					task: "学习小程序",
					completion: "确认完成",
					icon: 'circle'
				}, {
					id: 5,
					task: "学习高数",
					completion: "确认完成",
					icon: 'circle'
				}],
				formLabelWidth: '120px',
				addtask: {
					id: "",
					task: "",
					completion: "确认完成"
				},
				// 用于判断任务完成状态
				completion: "未完成",
				// 用于判断那一条任务更改任务状态
				taskId: "",
				// 往日未完成任务表单
				unTaskForm: [{
					id: "1",
					task: "学习java",
					completion: "确认完成"
				}, {
					id: "2",
					task: "学习数据库",
					completion: "确认完成"
				}, {
					id: "3",
					task: "学习小程序",
					completion: "确认完成"
				}, {
					id: "4",
					task: "学习高数",
					completion: "确认完成"
				}],
				// 已完成任务记录
				completeTaskFrom: [{
					id: "1",
					task: "高数作业",
					time: "2022-2-27 20:10:32"
				}, {
					id: "2",
					task: "学习js",
					time: "2022-2-27 10:10:32"
				}, {
					id: "3",
					task: "学习vue",
					time: "2022-2-26 20:10:32"
				}, {
					id: "4",
					task: "看书",
					time: "2022-2-25 15:10:32"
				}],
				items: ["任务记录", "打卡记录", "备忘录", "今日单词"],
				current: 0,
				todayWord: [{
					english: "appeal",
					chinese: "呼吁，请求"
				}, {
					english: "boost",
					chinese: "促进"
				}, {
					english: "chat",
					chinese: "聊天"
				}, {
					english: "dim",
					chinese: "暗淡的"
				}, {
					english: "entire",
					chinese: "全部的"
				}, {
					english: "fraction",
					chinese: "小部分"
				}, {
					english: "grant",
					chinese: "授予，承认"
				}, {
					english: "handle",
					chinese: "处理"
				}, {
					english: "interval",
					chinese: "间隔"
				}, {
					english: "mass",
					chinese: "众多"
				}],
				// icon:['circle','checkbox-filled']
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				// 输入框的值
				console.log(value)
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			addTask() {
				
			},
			complete(id) {
				// console.log(id)
				for (var i = 0; i < this.taskForm.length; i++) {
					if (this.taskForm[i].id == id) {
						if (this.taskForm[i].icon == 'circle') {
							this.taskForm[i].icon = 'checkbox-filled'
							return;
						} else {
							this.taskForm[i].icon = 'circle'
							return;
						}
					}
				}
			},
			// 学习计时页面
			toLearingTime() {
				uni.navigateTo({
					url: './learingTime',
					fail: function(res) {
						console.log(res)
					}
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style>
	.box {
		background-color: #F7F7F7
	}

	.header {
		height: 100px;
	}

	.header-card {
		background: -webkit-linear-gradient(left top, white, #87CEFA);
		background: -o-linear-gradient(bottom left, white, #87CEFA);
		background: -moz-linear-gradient(bottom left, white, #87CEFA);
		background: linear-gradient(to bottom left, white, #87CEFA);
	}
</style>
